﻿@page "/docs/helpers/utilities/object-fit"

<Seo Canonical="/docs/helpers/utilities/object-fit" Title="Blazorise Object Fit system" Description="Use the object fit utilities to modify how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container." />

<DocsPageTitle Path="Helpers/Utilities/Object Fit" AddedVersion="Added in v1.7">
    Blazorise Object Fit Utilities
</DocsPageTitle>

<DocsPageLead>
    Use the object fit utilities to modify how the content of a <Anchor To="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">replaced element</Anchor>, such as an <Code Tag>Image</Code>, should be resized to fit its container.
</DocsPageLead>

<DocsPageSubtitle>
    How it works
</DocsPageSubtitle>

<DocsPageParagraph>
    Change the value of the <Anchor To="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit">object-fit property</Anchor>  with our responsive <Code>ObjectFit</Code> utility classes. This property tells the content to fill the parent container in a variety of ways, such as preserving the aspect ratio or stretching to take up as much space as possible.
</DocsPageParagraph>

<DocsPageParagraph>
    Classes for the value of <Code>ObjectFit</Code> are named using the format <Code>ObjectFit.{value}</Code>. Choose from the following values:
</DocsPageParagraph>

<DocsPageParagraph>
    <UnorderedList>
        <UnorderedListItem><Code>Contain</Code></UnorderedListItem>
        <UnorderedListItem><Code>Cover</Code></UnorderedListItem>
        <UnorderedListItem><Code>Fill</Code></UnorderedListItem>
        <UnorderedListItem><Code>Scale</Code> (for scale-down)</UnorderedListItem>
        <UnorderedListItem><Code>None</Code></UnorderedListItem>
    </UnorderedList>
</DocsPageParagraph>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic">
        Add the <Code>ObjectFit.{value}</Code> class to the <Anchor To="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">replaced element</Anchor>:
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <ObjectFitBasicExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="ObjectFitBasicExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Resizing to cover a container">
        Use the <Code>ObjectFit.Cover</Code> utility to resize an element’s content to cover its container.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <ObjectFitCoverExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="ObjectFitCoverExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Containing an element">
        Use the <Code>ObjectFit.Contain</Code> utility to resize an element’s content to stay contained within its container.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <ObjectFitContainExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="ObjectFitContainExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Stretching to fit a container">
        Use the <Code>ObjectFit.Fill</Code> utility to stretch an element’s content to fit its container.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <ObjectFitFillExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="ObjectFitFillExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Scaling down if too large">
        Use the <Code>ObjectFit.Scale</Code> utility to display an element’s content at its original size but scale it down to fit its container if necessary.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <ObjectFitScaleExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="ObjectFitScaleExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Using an element's original size">
        Use the <Code>ObjectFit.None</Code> utility to display an element’s content at its original size ignoring the container size.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <ObjectFitNoneExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="ObjectFitNoneExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Breakpoints and media queries">
        <Paragraph>
            Responsive variations also exist for each <Code>ObjectFit</Code> value using the format <Code>ObjectFit.{Value}.{Breakpoint}</Code>, for the following breakpoint abbreviations: <Code>OnMobile</Code>, <Code>OnTablet</Code>, <Code>OnDesktop</Code>, <Code>OnWidescreen</Code>, <Code>OnFullHD</Code>, <Code>OnQuadHD</Code>. Classes can be combined for various effects as you need.
        </Paragraph>
        <Paragraph>
            <Alert Color="Color.Info" Visible>
                <AlertDescription>
                    <Strong>Note:</Strong> To simulate and view it in action, turn on the DevTools responsive mode in your browser or click the view buttons below.
                </AlertDescription>
            </Alert>
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth FrameUrl="docs/helpers/utilities/object-fit/responsive-example-iframe">
        <ObjectFitResponsiveExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="ObjectFitResponsiveExample" />
</DocsPageSection>